<!-- Default badge with ripple effect -->
<span class="badge pmd-ripple-effect">1</span>

<!-- Success badge with ripple effect -->
<span class="badge badge-success pmd-ripple-effect">2</span>

<!-- Warning badge with ripple effect -->
<span class="badge badge-warning pmd-ripple-effect">4</span>

<!-- Error badge with ripple effect -->
<span class="badge badge-error pmd-ripple-effect">6</span>

<!-- Information badge with ripple effect -->
<span class="badge badge-info pmd-ripple-effect">8</span>

<!-- Inverse badge with ripple effect -->
<span class="badge badge-inverse pmd-ripple-effect">10</span>

<!--Badges on Buttons-->
<!-- Badge on primary button with ripple effect -->
<button type="button" class="btn btn-primary pmd-ripple-effect">Primary <span class="badge">7</span></button>

<!-- Badge on success button with ripple effect -->
<button type="button" class="btn btn-success pmd-ripple-effect">Success <span class="badge">3</span></button>

<!-- Badge on danger button with ripple effect -->    
<button type="button" class="btn btn-danger pmd-ripple-effect">Danger <span class="badge">5</span></button> 